<template>
  <div>
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleAdd">新增<el-icon><Plus /></el-icon></el-button>
    <!-- 删除按钮 -->
    <el-button type="danger" @click="handleDelete" :disabled="selectedRows.length === 0">批量删除（{{selectedRows.length}}）</el-button>

    <!-- 表格 -->
    <el-table :data="data.tableData" ref="table" @selection-change="handleSelectionChange" style="margin-top: 20px;">
      <!-- 选择框 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="服务Id" prop="serviceId"></el-table-column>
      <el-table-column label="路径" prop="routePath"></el-table-column>
      <el-table-column label="请求路径" prop="requestPath"></el-table-column>
      <!-- 编辑按钮 -->
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small"><el-icon><Edit /></el-icon>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改弹框 -->
    <el-dialog v-model="dialogVisible" title="新增/修改路由">
      <el-form :model="form" ref="form" :rules="data.rules" label-width="100px">
        <el-form-item label="服务Id" prop="serviceId" width="200px">
          <el-input v-model="form.routeName"></el-input>
        </el-form-item>

        <el-form-item label="路径" prop="routePath" width="200px">
          <el-input v-model="form.routePath"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" prop="requestPath" width="200px">
          <el-input v-model="form.requestPath" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted ,ref} from "vue";
import { loadRoutes,updateRoutesApi } from "@/utils/gatewayApi/routes";
import { ElMessage } from "element-plus";
import {Delete} from "@element-plus/icons-vue";

const data = reactive({
  tableData: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  rules: {
    serviceId: [
      { required: true, message: "请输入服务Id", trigger: "blur" }
    ],
    requestPath: [
      { required: true, message: "请输入路由名称", trigger: "blur" }
    ],
    routePath: [
      { required: true, message: "请输入路由路径", trigger: "blur" }
    ]
  }
});
const selectedRows = ref([]); // 选中的行
const dialogVisible = ref(false); // 弹框显示控制
const form = ref({
  requestPath: "",
  routePath: "",
  routeName:""
});
const isEditing = ref(false); // 是否是编辑状态
const currentRow = ref(null); // 当前编辑的行

const loadTableData = async () => {
  let params = {
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
  await loadRoutes(params).then((res) => {
    if (res.code === "200") {
      data.tableData = res.data.list;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const handleSelectionChange = (selections) => {
  selectedRows.value = selections;
};

const handleAdd = () => {
  isEditing.value = false;
  form.requestPath = "";
  form.routePath = "";
  dialogVisible.value = true;
};

const handleEdit =(row) => {
  isEditing.value = true;
  form.requestPath = row.requestPath;
  form.routePath = row.routePath;
  currentRow.value = row;
  dialogVisible.value = true;
};

const handleSave = () => {
  if (!form.requestPath || !form.routePath) {
    ElMessage.error("请填写完整的路由信息！");
    return;
  }
  if (isEditing.value) {
    updateRoutesApi(form).then(res=>{
     if(res.code==='200'){
       ElMessage.success('操作成功')
       form.value.requestPath=''
       form.value.routePath=''
       dialogVisible.value = false;
     }else{
       ElMessage.error(res.msg)
     }
   })
  } else {
    // 新增操作
    data.tableData.push({ ...form });
  }

  dialogVisible.value = false;
};

const handleDelete = () => {
  if (selectedRows.length === 0) {
    ElMessage.warning("请选择要删除的路由！");
    return;
  }

  ElMessage.confirm("确定删除选中的路由吗?", "提示", {
    type: "warning"
  }).then(() => {
    selectedRows.forEach((row) => {
      const index = data.tableData.indexOf(row);
      if (index > -1) {
        data.tableData.splice(index, 1);
      }
    });
    selectedRows.length = 0; // 清空选中的项
    ElMessage.success("删除成功！");
  });
};

onMounted(() => {
  loadTableData();
});
</script>

<style scoped>
.el-table .el-button {
  margin-right: 10px;
}
.dialog-footer {
  text-align: right;
}
</style>
